<template>
	<picker class="input" v-if="isEdit" mode="region" @change="onChange">
		<view>{{ localValue || '请选择省市区'}}</view>
	</picker>
	<text v-else class="value">{{ localValue }}</text>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: () => ''
			},
			field: Object,
			isEdit: Boolean,
		},
		
		data() {
			return {
				localValue: this.value // 初始化本地副本
			}
		},
		
		watch: {
			value(newVal) {
				this.localValue = newVal // 当prop变化时更新本地值
			}
		},
		
		methods: {
			onChange(e) {
				;
				// 触发事件
				this.$emit('update-value', e.detail.value.join(' '));
			},
		},
	};
</script>

<style scoped>
	.picker {
		flex: 2;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		color: #333;
	}

	.value {
		flex: 2;
		font-size: 14px;
		color: #333;
	}
</style>